<%--
  Created by IntelliJ IDEA.
  User: Healer
  Date: 2021/4/9
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax实例</title>
<script type="text/javascript">
    function doAjax(){
        // 原生的ajax请求： get请求、post请求
        // 1、创建一个ajax的引擎对象  XMLHttprequest 对象
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 将请求委托给ajax引擎；
        /*
        ajax数据如何传递给服务器？
            非ajax是通过提交form表单进行数据传递的；
            ajax有两种方式：get请求：使用 url传参即可；
                          post请求，需要在send方法中传递固定格式的参数键值对即可；
         */
        xmlhttp.open("GET", "AjaxDemoServlet?userName=zhangsan&userAge=20", true);//true表示开启异步处理
        // ajax引擎发送请求到服务器；
        xmlhttp.send();//发送请求
        // ajax引擎接收服务器的响应并根据服务器响应的状态码，判定本次请求的结果状态；
        // 在ajax引擎上有一个状态码监听事件，这个事件可以绑定一个处理函数； 【类似给一个控件绑定一了一个 click 事件】
        // ajax引擎使用回调函数，通知浏览器客户端【局部刷新浏览器客户端的数据】
        xmlhttp.onreadystatechange = function (){
            // 服务器状态码 为 200 ok ； ajax引擎对象 状态码 为 4 时候，需要服务器的影响完成了，并且是成功的
            // ajax引擎的 responseText 属性是 服务器发送过来的 响应信息内容
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                document.getElementById("lblMsg").innerHTML = xmlhttp.responseText;
            }
        }

    }
</script>
</head>
<body>
<input type="button" name="ajaxdemo" value="ajaxdemo" onclick="doAjax()">
<label id="lblMsg"></label>
</body>
</html>
